<template>
	<view class="container">
		<form @submit="formSubmit" class="infoFoem">
			<view class="missionName"><text>任务名称:</text><text>{{missionList.name}}</text></view>
			<view class="missionType"><text>任务类型:</text><text>{{missionList.taskTypeText}}</text></view>
			<view class="objectType"><text>对象类型:</text><text>{{missionList.targetTypeText}}</text></view>
			<view class="dutyObjectType"><text>责任对象类型:</text><text>{{missionList.dutyObjectTypeText}}</text> </view>
			<view class="dutyObject"><text>责任对象:</text><text>{{missionList.dutyObjectText}}</text></view>
			<view class="missionAddress"><text>任务地点:</text><text>{{missionList.taskAddress}}</text></view>
			<view class="taskStartTime">
				<text class="missTime">发送时间:</text>
				<text>{{missionList.taskStartTime}}</text>
			</view>
			<view class="taskEndTime">
				<text class="missTime">截止时间:</text>
				<text>{{missionList.taskEndTime}}</text>
			</view>
			<view class="missionContent">
				<text>任务内容</text>
				<scroll-view scroll-y="true" class="scrollView">
					{{missionList.content}}
				</scroll-view>
			</view>
			<view class="missionRemark">
				<text>备注:</text>
				<scroll-view scroll-y="true" class="scrollView">
					{{missionList.remark}}
				</scroll-view>
			</view>
			<view class="feedbackTxt" v-if="missionList.taskStatusText == '未完成'">
				<text>反馈内容</text>
				<textarea placeholder="请输入..." maxlength="2000" v-model="feedbackContent"></textarea>
			</view>
			<view class="feedbackTxt" v-else>
				<text>反馈内容</text>
				<textarea disabled v-model="feedbackList.feedbackContent"></textarea>
			</view>
			<view class="notesTxt" v-if="missionList.taskStatusText == '未完成'">
				<text>反馈备注:</text>
				<textarea v-model="feedbackRemark" placeholder="请输入..."></textarea>
			</view>
			<view class="notesTxt" v-else>
				<text>反馈备注:</text>
				<textarea disabled v-model="feedbackList.remark"
					v-if="feedbackList.feedbackContent == '已完成'"></textarea>
				<textarea disabled v-model="feedbackList.remark" v-else></textarea>
			</view>
			<button form-type="submit" v-if="missionList.taskStatusText == '未完成'">提 交</button>
			<view class="footer_top"></view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '新增任务',
				missionList: [{
					id: '',
					name: '',
					taskTypeText: '',
					targetTypeText: '',
					dutyObjectTypeText: '',
					dutyObjectText: '',
					taskAddress: '',
					taskStartTime: '',
					taskEndTime: '',
					content: '',
					remark: '',
					taskStatusText: '',
				}],
				feedbackList: [],
				ids: [],
				feedbackContent: '',
				feedbackRemark: '',
				id: '',
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getdatainfo()
		},
		methods: {
			async getdatainfo() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/order-task/' + this.id,
						method: "get",
					})

				if (res.success == true) {
					this.missionList = res.body.orderTask;
					this.feedbackList = res.body.feedback;
					if (!this.missionList.content) {
						this.missionList.content = '无'
					}
					if (!this.missionList.taskStartTime) {
						this.missionList.taskStartTime = '无'
					}
					if (!this.missionList.taskEndTime) {
						this.missionList.taskEndTime = '无'
					}
					if (this.feedbackList != null) {
						if (!this.feedbackList.remark) {
							this.feedbackList.remark = '<空>'
						}
					}
				}
			},
			async formSubmit() {
				this.ids.push(this.id);
				if (this.feedbackContent == '') {
					uni.showLoading({
						title: '反馈内容不能为空!',
						icon: 'none'
					});
					setTimeout(function() {
						uni.hideLoading();
					}, 2000)
				} else {
					let loginName = uni.getStorageSync('loginName');
					let name = uni.getStorageSync('name');
					console.log("登录账户loginName：",loginName)
					console.log("登录用户name：",name)
					console.log("责任对象：",this.missionList.dutyObjectText)
					// if (loginName != this.missionList.dutyObjectText) {
					if (name != this.missionList.dutyObjectText) {
						uni.showLoading({
							title: '非责任对象，不能进行反馈!',
							icon: 'none'
						});
						setTimeout(() => {
							uni.hideLoading();
						}, 2000)
					} else {
						const res = await this
							.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
								url: '/api-operate/order-task/finishTask',
								method: "post",
								data: {
									ids: this.ids,
									feedbackContent: this.feedbackContent,
									remark: this.feedbackRemark
								}
							})
						if (res.success == true) {
							
							uni.navigateBack({
								url: '/pages/workOrder/index'
							});
							uni.$emit("planAdd", {
								taskStatusText: "已完成",
								id: this.id
							});
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		view {
			background-color: #ffffff;
			padding-left: 2%;
		}

		.infoFoem {
			height: 100vh;

			.missionName {
				height: 100rpx;
				margin-bottom: 3%;
				border-bottom: none;
				display: flex;
				align-items: center;

				text:first-child {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.missionType {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;

				text:first-child {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.objectType {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;

				text:first-child {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.dutyObjectType {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;

				text:first-child {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.dutyObject {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;

				text:first-child {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.missionAddress {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;

				text:first-child {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.taskStartTime {
				width: 100%;
				height: 110rpx;
				border-bottom: none;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dedede;

				.missTime {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.taskEndTime {
				width: 100%;
				margin-bottom: 3%;
				height: 110rpx;
				border-bottom: none;
				display: flex;
				align-items: center;

				.missTime {
					color: #959595;
				}

				text:last-child {
					margin-left: 2%;
					color: #000000;
				}
			}

			.missionContent {
				height: 190rpx;
				margin-bottom: 3%;
				border-bottom: none;

				text {
					color: #959595;
				}

				.scrollView {
					color: #000000;
				}
			}

			.missionRemark {
				height: calc(16vh);
				border-bottom: none;

				text {
					color: #959595;
				}

				.scrollView {
					color: #000000;
				}
			}

			.feedbackTxt {
				height: 220rpx;
				border-bottom: 1px solid #e2e2e2;
				margin-top: 3%;

				text {
					color: #007AFF;
				}

				textarea {
					width: 99%;
					height: calc(220rpx - 24%);
					color: #000000;
				}
			}

			.notesTxt {
				width: 100%;
				height: 200rpx;
				border-bottom: none;
				display: flex;
				flex-direction: column;

				text {
					color: #007AFF;
				}

				textarea {
					width: 94%;
					height: calc(200rpx - 28%);
					color: #000000;
				}
			}

			button {
				width: 94%;
				height: 90rpx;
				line-height: 90rpx;
				margin: 5% auto;
				background-color: #10a8ff;
				color: #ffffff;
			}

			.footer_top {
				width: 100%;
				height: 0.1px;
				background-color: #EBEFF6 !important;
			}
		}
	}
</style>
